<!--  -->
<script setup lang="ts">
	import { ref } from 'vue'
	import { UserData } from '../../types/user'
	import { getUserInfoApi } from '../../apis/user'
	import { useUserStore } from '../../stores/user'
	const userStore = useUserStore()

	//调接口 获取用户的信息
	const userInfo = ref({} as UserData)
	const getUserData = async () => {
		const res = await getUserInfoApi()
		userInfo.value = res
		// console.log(userInfo.value)
		userStore.userId = userInfo.value.id
	}

	//退出登录
	const LoginOut = () => {
		// console.log('我要退出登录了哟~')
		//弹框
		uni.showModal({
			title: '提示',
			content: 'Are you Sure LoginOut?',
			success: (res) => {
				if (res.confirm === true) {
					//确认逻辑
					//清空用户信息 跳转到登录页面
					useUserStore().token = ''
					uni.reLaunch({
						url: '/pages/login/login',
					})
				} else if (res.cancel) {
					//取消逻辑
					console.log('不退出,你点什么点~')
				}
			},
		})
	}

	getUserData()
</script>
<template>
	<scroll-view scroll-y>
		<view class="my-page">
			<!-- 用户资料（头像&昵称） -->
			<view class="user-profile">
				<image class="user-avatar" :src="userInfo.avatar"></image>
				<view class="user-info">
					<text class="nickname">{{ userInfo.account }}</text>
					<text class="iconfont icon-edit"></text>
				</view>
			</view>
			<!-- 用户数据 -->
			<view class="user-data">
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.collectionNumber }}</text>
					<text class="data-label">收藏</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.likeNumber }}</text>
					<text class="data-label">关注</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.score }}</text>
					<text class="data-label">积分</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{ userInfo.couponNumber }}</text>
					<text class="data-label">优惠券</text>
				</navigator>
			</view>
			<!-- 问诊医生 -->
			<custom-section :style="{ paddingBottom: '20rpx' }" title="问诊中">
				<swiper
					class="uni-swiper"
					indicator-active-color="#2CB5A5"
					indicator-color="#EAF8F6"
					indicator-dots
				>
					<swiper-item v-for="item in userInfo.consultationInfo">
						<view class="doctor-brief">
							<image class="doctor-avatar" :src="item.avatar" />
							<view class="doctor-info">
								<view class="meta">
									<text class="name">{{ item.name }}</text>
									<text class="title"
										>{{ item.depName }} | {{ item.positionalTitles }}</text
									>
								</view>
								<view class="meta">
									<text class="tag">{{ item.gradeName }}</text>
									<text class="hospital">{{ item.hospitalName }}</text>
								</view>
							</view>
							<navigator class="doctor-contcat" hover-class="none" url=" ">
								进入咨询
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</custom-section>
			<!-- 药品订单 -->
			<custom-section show-arrow title="药品订单">
				<template #right>
					<navigator hover-class="none" url="/subpkg_consult/order_list/order_list">
						全部订单
					</navigator>
				</template>
				<view class="drug-order">
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="userInfo.orderInfo?.finishedNumber"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image src="/static/images/order-status-1.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">已完成</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="userInfo.orderInfo?.paidNumber"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image src="/static/images/order-status-2.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="userInfo.orderInfo?.receivedNumber"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image src="/static/images/order-status-3.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">待发货</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge
							:text="userInfo.orderInfo?.shippedNumber"
							:offset="[3, 3]"
							absolute="rightTop"
						>
							<image src="/static/images/order-status-4.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">待收货</text>
					</navigator>
				</view>
			</custom-section>
			<!-- 快捷工具 -->
			<custom-section title="快捷工具">
				<uni-list :border="false">
					<uni-list-item
						:border="false"
						title="我的问诊"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-01',
						}"
					/>
					<uni-list-item
						:border="false"
						title="我的处方"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-02',
						}"
					/>
					<uni-list-item
						to="/subpkg_archive/list/list"
						:border="false"
						title="家庭档案"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-03',
						}"
					/>
					<uni-list-item
						:border="false"
						title="地址管理"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-04',
						}"
					/>
					<uni-list-item
						:border="false"
						title="我的评价"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-05',
						}"
					/>
					<uni-list-item
						:border="false"
						title="官方客服"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-06',
						}"
					/>
					<uni-list-item
						:border="false"
						title="设置"
						show-arrow
						show-extra-icon
						:extra-icon="{
							type: 'icon-symbol-tool-07',
						}"
					/>
				</uni-list>
			</custom-section>
			<!-- 退出登录 -->
			<view @tap="LoginOut" class="logout-button">退出登录</view>
			<!-- <button @tap="LoginOut" class="logout-button" type="primary">退出登录</button> -->
		</view>
	</scroll-view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
